<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式</title>
    <!-- 样式匹配视口宽、高度 -->
    <link rel="stylesheet" href="qxSum.css">
</head>

<body>

    <div class="qx_tableList">
        <div class="qx_tableBox">
            <div class="qx_tableHeader">
                <ul class="qx_ul">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </div>
            <div class="qx_tableBody">
                <!-- <qx_ul class="qx_ul">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </qx_ul> -->
            </div>


        </div>

        <div class="qx_tableBox">
            <div class="qx_tableHeader">
                <ul class="qx_ul">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </div>
            <div class="qx_tableBody">
                <!-- <qx_ul class="qx_ul">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </qx_ul> -->
            </div>
            <div class="qx_tableTitle">

            </div>
        </div>

    </div>


    <script src="qx.js"></script>
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script src="./js/jquery.liMarquee.js"></script>
    <script>
        // 处理
        $(function () {

            setTimeout(() => {
                Get();
            }, 1000);

            setTimeout(() => {
                liMarquees();
            }, 2000);

        })

        // 滚动插件
        function liMarquees() {
            $('.qx_tableBody').liMarquee({
                direction: 'up',
                loop: -1,
                scrolldelay: 0, // 滚动延迟
                scrollamount: 40,
                circqx_ular: true, // 是否循环播放
                drag: true, // 是否可以通过拖动来控制滚动
                hoverstop: true // 鼠标悬停时是否停止滚动
            });
        }


        function Get() {
            let html = "";
            for (let i = 0; i < 100; i++) {
                html += `
<ul class="qx_ul">
                    <li>${i}</li>
                    <li>${i}-a</li>
                    <li>${i}-b</li>
                    <li>${i}-c</li>
                </ul>
`;
            }
            $(".qx_tableBody").append(html);
        }


    </script>
</body>

</html>